<template class="firstpage">
    <div>

        <div class="boxMargin">
            <el-form :model="customData" ref="customData" label-width="200px" class="demo-ruleForm" label-position='left'>
            <el-collapse v-model="customData.activeNames" @change="handleChange">
                <el-collapse-item v-for='(item, g_index) in customData.groupList' :key="g_index" :name="item.groupId">
                    <template slot="title">
                        <div style="font-size:15px;font-weight:bold;">
                            <span v-if="item.xingModel" style="color:red;">*</span>
                            <span>{{item.groupName}}</span>
                        </div>
                    </template>
                    <el-row :gutter="20">
                        <el-col :span="10" v-for="(dataValue, index) in item.attrList" :key="index" style="margin-bottom:20px;">
                            <div v-if="dataValue.editType === 0">
                                <el-form-item  v-if="dataValue.valueType === 1" :label="dataValue.attrAliasName" :required="dataValue.isMustEnter===1? true:false" id="textAttrValue">
                                    <el-form-item :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.textAttrValueCname':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请填写'+ dataValue.attrAliasName + '中文', trigger: 'blur' }]:[]">
                                        <el-input type="number" v-model="dataValue.textAttrValueCname" class="w70" placeholder="中文" @keyup.native="getVal(dataValue)"></el-input>
                                        <span style="color:#cecece;font-size:13px;">{{dataValue.application}}</span>
                                    </el-form-item>
                                </el-form-item>
                                <el-form-item v-else :label="dataValue.attrAliasName" :required="dataValue.isMustEnter===1? true:false" id="textAttrValue">
                                    <el-form-item :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.textAttrValueCname':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请填写'+ dataValue.attrAliasName + '中文', trigger: 'blur' }]:[]">
                                        <el-input v-model="dataValue.textAttrValueCname" class="w70" placeholder="中文" @keyup.native="getVal(dataValue)"></el-input>
                                        <span style="color:#cecece;font-size:13px;">{{dataValue.application}}</span>
                                    </el-form-item>
                                </el-form-item>
                            </div>
                            <el-form-item v-else-if="dataValue.editType === 1" :label="dataValue.attrAliasName" :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.dropDownAttrValue':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请选择'+ dataValue.attrAliasName, trigger: 'change' }]:[]">
                                <div>
                                    <el-select v-model="dataValue.dropDownAttrValue" placeholder="请选择" clearable>
                                        <el-option
                                            v-for="data in dataValue.categoryAttributeValue"
                                            :key="data.categoryAttrValueId"
                                            :label="data.valueName"
                                            :value="data.categoryAttrValueId">
                                        </el-option>
                                    </el-select>
                                    <span style="color:#cecece;font-size:13px;">{{dataValue.application}}</span>
                                </div>
                            </el-form-item>
                            <el-form-item v-else-if="dataValue.editType === 2" :label="dataValue.attrAliasName" :prop="dataValue.isMustEnter===1?'groupList.' + g_index + '.attrList.' + index +'.checkBoxAttrValue':''" :rules="dataValue.isMustEnter===1?[{ required: true, message: '请选择'+ dataValue.attrAliasName, trigger: 'change' }]:[]">
                                <div>
                                    <el-checkbox-group v-model="dataValue.checkBoxAttrValue">
                                        <el-checkbox v-for="x in dataValue.categoryAttributeValue" :key="x.categoryAttrValueId" :label="x.categoryAttrValueId">{{x.valueName}}</el-checkbox>
                                    </el-checkbox-group>
                                    <span style="color:#cecece;font-size:13px;">{{dataValue.application}}</span>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
            </el-form>
            <el-row>
                <el-col :span="24" style="text-align: center;margin-top:20px;">
                    <el-button type="success" @click="infoUpdate">保存</el-button>
                </el-col>
            </el-row>
        </div>
        <el-dialog title="提示" :visible.sync="customData.checkModel" width="20%" center>
            <div v-html="customData.checkValue" style="font-size:15px;line-height: 30px;"></div>
        </el-dialog>
    </div>
</template>
<script>
import $ from "jquery";
import _validate from "../../../../../framework/commonJs/wptx_validate";
import _tools from "../../../../../framework/commonJs/wptx_tools";
import _common from "../../../../../framework/commonJs/wptx_common";
import _api from "@/framework/API/generalItem";
let _FUNCTION_NAME = '';
export default {
    data() {
        return {
            tableData: [],
            searchData: {
            },
            searchDataBuffer: {
            },
            pageData: {
                pageNo: 1,
                pageSize: 10,
                total: 1,
                pageSizes: [10, 20, 50, 100]
            },
            dialogData: {},
            historyData: {},
            infoData: {},
            customData: {
               activeNames:['1'],
               groupList:[],
               categoryId:"",
               masterItemId:"",
               checkModel:false,
               checkValue:""
            },
            form: {},
            rules: {}
        };
    },
    computed: {},
    watch: {},
    filters: {},
    created() { },
    mounted() {
        this._FUNCTION_NAME = this.$route.name
        this.onInit()
    },
    beforeDestroy() { },
    methods: {
        onInit(data) {
            let self = this;
            self.customData.categoryId = sessionStorage.getItem("categoryId");
            self.customData.masterItemId = sessionStorage.getItem("itemId");
            let params = {
                masterItemId: self.customData.masterItemId,
                categoryId:self.customData.categoryId
            }
            _api.queryCategoryAttr(self, params, self.callBack_queryCategoryAttr)
        },
        onSearch(data) {
            let self = this;
        },
        onChangePage(data) {
            let self = this;
        },
        onReset(data) {
            let self = this;
        },
        onAdd(data) { },
        onDelete(data) {
            let self = this;
        },
        onInfo(data) {
            let self = this;
        },
        onUpdate(formName) {
            let self = this;
        },
        onBathDelete() {
            let self = this;
        },
        onBathUpdate() { },
        onDisable(data) {
            let self = this;
        },
        onEnable(data) {
            let self = this;
        },
        onUpload(data) { },
        onBathUpload() { },
        onExport(data) { },
        onDownload(data) { },
        onHistory(data) { },
        callBack_queryCategoryAttr(data) {

            let self = this;
            if (_validate.checkEmpty(data)) {
                _validate.openTip(self, "返回数据为空", "warning");
            } else {
                self.customData.groupList = data.data.groupList
                for (let i = 0; i < self.customData.groupList.length; i++) {
                    for (let x = 0; x < self.customData.groupList[i].attrList.length; x++) {
                        //editType  0是文本框  1是单选  2是多选
                        if(self.customData.groupList[i].attrList[x].editType === 0){
                            if (_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue)) {
                                self.customData.groupList[i].attrList[x].attrValue = []
                                self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', '')
                            } else {
                                if(_validate.checkEmpty(self.customData.groupList[i].attrList[x].attrValue[0])){
                                    self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', '')
                                }else{
                                    if(self.customData.groupList[i].attrList[x].attrValue[0].valueCname){
                                        self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', self.customData.groupList[i].attrList[x].attrValue[0].valueCname)
                                    }else{
                                        self.$set(self.customData.groupList[i].attrList[x], 'textAttrValueCname', "")
                                    }
                                }
                            }
                        }else if(self.customData.groupList[i].attrList[x].editType === 1){
                            if (_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue)) {
                                self.customData.groupList[i].attrList[x].attrValue = []
                                self.$set(self.customData.groupList[i].attrList[x], 'dropDownAttrValue', '')
                            } else {
                                let value = "";
                                for (let y = 0; y < self.customData.groupList[i].attrList[x].categoryAttributeValue.length; y++) {
                                    if(!_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue) && !_validate.checkEmpty(self.customData.groupList[i].attrList[x].attrValue[0])){
                                        if(self.customData.groupList[i].attrList[x].attrValue[0].masterCategoryAttrValueId == self.customData.groupList[i].attrList[x].categoryAttributeValue[y].categoryAttrValueId){
                                            value = self.customData.groupList[i].attrList[x].attrValue[0].masterCategoryAttrValueId
                                        }
                                    }
                                }
                                self.$set(self.customData.groupList[i].attrList[x], 'dropDownAttrValue', value)
                                // self.$set(self.customData.groupList[i].attrList[x], 'dropDownAttrValue', self.customData.groupList[i].attrList[x].attrValue[0].masterCategoryAttrValueId)
                            }
                        }else if(self.customData.groupList[i].attrList[x].editType === 2){
                            if (_validate.checkListEmpty(self.customData.groupList[i].attrList[x].attrValue)) {
                                self.customData.groupList[i].attrList[x].attrValue = []
                                self.$set(self.customData.groupList[i].attrList[x], 'checkBoxAttrValue', [])
                            } else {
                                let num = []
                                for (let z = 0; z < self.customData.groupList[i].attrList[x].attrValue.length; z++) {
                                    num.push(self.customData.groupList[i].attrList[x].attrValue[z].masterCategoryAttrValueId)
                                }
                                self.$set(self.customData.groupList[i].attrList[x], 'checkBoxAttrValue', num)
                            }
                        }
                    }
                }
                self.customData.activeNames = []
                for (let i = 0; i < self.customData.groupList.length; i++) {
                    self.customData.activeNames.push(self.customData.groupList[i].groupId)
                    let status = false
                    for (let x = 0; x < self.customData.groupList[i].attrList.length; x++) {
                        if(self.customData.groupList[i].attrList[x].isMustEnter === 1){
                            status = true;
                            break
                        }
                    }
                    if(status){
                        self.$set(self.customData.groupList[i], 'xingModel', true)
                    }
                }
            }
        },
        callBack_updateAttrValue(data){
            let self = this;
            if (_validate.checkEmpty(data)) {
                _validate.openTip(self, "返回数据为空", "warning");
            } else {
                _validate.openTip(self, "保存成功", "success");
                self.onInit()
            }
        },
        handleChange(val) {
        },
        infoUpdate(){
            let self = this;
            self.$refs['customData'].validate((valid) => {
                if (valid) {
                    let params = {
                        masterItemId: self.customData.masterItemId,
                        categoryId:self.customData.categoryId,
                        groupAttrList:[]
                    }
                    let list = []
                    for (let i = 0; i < self.customData.groupList.length; i++) {
                        let attrList = []
                        for (let x = 0; x < self.customData.groupList[i].attrList.length; x++) {
                            let attrValueList = []
                            //editType  0是文本框  1是单选  2是多选
                            if(self.customData.groupList[i].attrList[x].editType === 0){
                                attrValueList.push({
                                    "valueCname":self.customData.groupList[i].attrList[x].textAttrValueCname
                                })
                            }else if(self.customData.groupList[i].attrList[x].editType === 1){
                                let value = self.customData.groupList[i].attrList[x].dropDownAttrValue
                                if(!_validate.checkEmpty(value)){
                                    attrValueList.push({
                                        "masterCategoryAttrValueId":self.customData.groupList[i].attrList[x].dropDownAttrValue
                                    })
                                }
                            }else if(self.customData.groupList[i].attrList[x].editType === 2){
                                let checkValue = self.customData.groupList[i].attrList[x].checkBoxAttrValue
                                for (let z = 0; z < self.customData.groupList[i].attrList[x].checkBoxAttrValue.length; z++) {
                                    attrValueList.push({
                                        "masterCategoryAttrValueId":self.customData.groupList[i].attrList[x].checkBoxAttrValue[z]
                                    })
                                }
                            }
                            attrList.push({
                                "masterCategoryAttrId":self.customData.groupList[i].attrList[x].masterCategoryAttrId,
                                "attrName":self.customData.groupList[i].attrList[x].attrName,
                                "attrAliasName":self.customData.groupList[i].attrList[x].attrAliasName,
                                "isMustEnter":self.customData.groupList[i].attrList[x].isMustEnter,
                                "attrValueList":attrValueList
                            })
                        }
                        list.push({
                            "masterCategoryGroupId":self.customData.groupList[i].groupId,
                            'attrList':attrList
                        })
                    }
                    params.groupAttrList = list
                    _api.updateAttrValue(self, params, self.callBack_updateAttrValue)
                } else {
                    return false;
                }
            });

        },
        getVal (val) {
         if(val.autoFill == 1) {
         }
        },
    }
};
</script>
<style scoped>
.w70{
    width: 70%;
    margin-bottom: 5px;
}
</style>
